<template>
  <el-card class="recheck-card">
    <div class="recheck-header">
      <h2 class="recheck-title">查卷申请</h2>
      <div class="filter-container">
        <el-select v-model="timeOrder" placeholder="时间排序" class="filter-item">
          <el-option label="时间降序" value="desc" />
          <el-option label="时间升序" value="asc" />
        </el-select>
        <rip-button style="width: 75px; height: 33px;" @click="handleReset" class="reset-button">重置</rip-button>
        <el-button type="primary" @click="handleQuery" class="query-button">查询</el-button>
      </div>
    </div>

    <page-list :tableData="examList" :total="total" @getPage="getPage">
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column prop="examinationName" label="考试名称" min-width="180" show-overflow-tooltip />
      <el-table-column prop="examinationType" label="考试类型" width="150" align="center">
        <template #default="scope">
          <el-tag 
            :type="getExamTypeTag(scope.row.examinationType)" 
            effect="light"
            class="exam-type-tag"
          >
            {{ scope.row.examinationType }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="开始时间" width="170" align="center">
        <template #default="scope">
          <span class="time-text">{{ formatTime(scope.row.startTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="endTime" label="结束时间" width="170" align="center">
        <template #default="scope">
          <span class="time-text">{{ formatTime(scope.row.endTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template #default="scope">
          <el-button 
            type="primary" 
            @click="getStudentOfExamOfHook(scope.row.examinationId)" 
            size="small"
            class="action-button"
          >
            <el-icon class="button-icon"><User /></el-icon> 查找学生
          </el-button>
        </template>
      </el-table-column>
    </page-list>
  </el-card>

  <el-dialog 
    v-model="dialogVisibleOfStudent" 
    title="查找学生" 
    width="60%" 
    destroy-on-close
    :close-on-click-modal="false"
    class="student-dialog"
  >
    <div class="search-container">
      <div class="spacer"></div>
      <div class="search-right">
        <div class="search-input-wrapper">
          <el-input
            v-model="studentAccount"
            placeholder="请输入学号查询"
            clearable
            class="search-input"
            size="small"
          >
            <template #prefix>
              <el-icon class="search-icon"><Search /></el-icon>
            </template>
          </el-input>
        </div>
        <div class="search-buttons">
          <rip-button @click="handleResetOfStudent" class="reset-button dialog-btn" size="small">
            <el-icon><RefreshLeft /></el-icon>&nbsp;重置
          </rip-button>
          <el-button type="primary" @click="handleQueryOfStudent" class="query-button dialog-btn" size="small">
            <el-icon><Search /></el-icon>&nbsp;查询
          </el-button>
        </div>
      </div>
    </div>

    <div class="student-table-container">
      <page-list :tableData="studentList" :total="totalStudent" @getPage="getPageStudent">
        <el-table-column prop="studentAccount" label="学号" width="150" align="center">
          <template #default="scope">
            <div class="account-cell">{{ scope.row.studentAccount }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="studentName" label="姓名" width="120" align="center">
          <template #default="scope">
            <div class="name-cell">{{ scope.row.studentName }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="classesName" label="班级" min-width="150" align="center">
          <template #default="scope">
            <el-tag size="small" effect="plain" class="class-tag">{{ scope.row.classesName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="finalScore" label="总分" width="100" align="center">
          <template #default="scope">
            <div class="score-cell" :class="getScoreClass(scope.row.finalScore)">
              {{ scope.row.finalScore }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="recheckStatus" label="申请状态" width="120" align="center">
          <template #default="scope">
            <el-tag  type="info" effect="light" v-if="scope.row.recheckStatus === -1">
               未申请
            </el-tag>
            <el-tag  type="primary" effect="light" v-else-if="scope.row.recheckStatus === 0">
               待处理
            </el-tag>
            <el-tag  type="warning" effect="light" v-else-if="scope.row.recheckStatus === 1">
               审核中
            </el-tag>
            <el-tag  type="success" effect="light" v-else-if="scope.row.recheckStatus === 2">
               已完成
            </el-tag>
            <el-tag  type="danger" effect="light" v-else-if="scope.row.recheckStatus === 3">
               已驳回
            </el-tag>
            <el-tag  type="success" effect="light" v-else-if="scope.row.recheckStatus === 4">
               已回复
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="120" align="center">
          <template #default="scope">
            <el-button 
              v-if="scope.row.recheckStatus === -1"
              type="primary" 
              @click="openRecheckDialog(scope.row)" 
              size="small"
              plain
              class="recheck-button"
            >
              申请查卷
            </el-button>

            <el-button 
              v-else-if="scope.row.recheckStatus === 3"
              type="danger" 
              @click="openRejectReasonDialog(scope.row)" 
              size="small"
              plain
              class="recheck-button"
            >
            查看原因
          </el-button>

          <el-button 
              v-else-if="scope.row.recheckStatus === 4"
              type="success" 
              @click="openRecheckResultDialog(scope.row)" 
              size="small"
              plain
              class="recheck-button"
            >
            查看结果
          </el-button>
          </template>
        </el-table-column>
      </page-list>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisibleOfStudent = false" plain>关闭</el-button>
      </div>
    </template>
  </el-dialog>


  <!-- 提交查卷申请 对话框 -->
  <el-dialog
    v-model="recheckDialogVisible"
    title="发起查卷申请"
    width="60%"
    destroy-on-close
    :close-on-click-modal="false"
    class="recheck-dialog"
  >
    <div class="recheck-form">
      <div class="form-item">
        <div class="form-label">
          <span class="required">*</span>学生提出疑问：
        </div>
        <el-input
          v-model="studentQuestion"
          type="textarea"
          :rows="3"
          placeholder="请输入学生提出的疑问内容..."
          class="question-input"
        />
      </div>
      
      <div class="form-item">
        <div class="form-label">教师备注：</div>
        <el-input
          v-model="teacherComment"
          type="textarea"
          :rows="3"
          placeholder="请输入教师备注信息..."
          class="comment-input"
        />
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="recheckDialogVisible = false" plain class="cancel-button">
          取消
        </el-button>
        <el-button type="primary" @click="handleRecheck" class="submit-button">
          提交申请
        </el-button>
      </div>
    </template>
  </el-dialog>


  <!-- 查看驳回原因 -->
  <el-dialog
    v-model="rejectReasonDialogVisible"
    title="驳回原因"
    width="40%"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    class="reject-reason-dialog"
  >
    <div class="reject-content">
      <div class="reject-icon">
        <el-icon><InfoFilled /></el-icon>
      </div>
      <div class="reject-title">申请已被驳回</div>
      <div class="reject-card">
        <div class="card-header">
          <el-icon><ChatDotRound /></el-icon>
          <span>驳回说明</span>
        </div>
        <div class="card-body">
          {{ rejectReason || '暂无详细说明' }}
        </div>
      </div>
      <div class="reject-tips">
        <el-icon><Warning /></el-icon>
        <span>如有疑问，请联系学科组长</span>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="rejectReasonDialogVisible = false" plain class="close-button">
          我知道了
        </el-button>
      </div>
    </template>
  </el-dialog>
  

  <!-- 查看审查结果 -->
  <el-dialog
    v-model="recheckResultDialogVisible"
    title="审查结果"
    width="40%"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    class="recheck-result-dialog">
    <div class="result-content">
      <div class="result-header">
        <div class="result-icon">
          <el-icon><DocumentChecked /></el-icon>
        </div>
        <h2 class="result-title">复查结果详情</h2>
      </div>
      
      <div class="score-cards">
        <div class="score-card original">
          <div class="card-header">
            <el-icon><Document /></el-icon>
            <span>原始分数</span>
          </div>
          <div class="score-value">{{ recheckResult.originalScore }}</div>
        </div>
        
        <div class="score-card final">
          <div class="card-header">
            <el-icon><DocumentChecked /></el-icon>
            <span>复查分数</span>
          </div>
          <div class="score-value">{{ recheckResult.finalScore }}</div>
          <div v-if="recheckResult.finalScore !== recheckResult.originalScore" class="score-diff" 
            :class="{'score-up': recheckResult.finalScore > recheckResult.originalScore, 
                    'score-down': recheckResult.finalScore < recheckResult.originalScore}">
            <el-icon v-if="recheckResult.finalScore > recheckResult.originalScore"><ArrowUp /></el-icon>
            <el-icon v-else><ArrowDown /></el-icon>
            <span>变化 {{ Math.abs(recheckResult.finalScore - recheckResult.originalScore) }} 分</span>
          </div>
        </div>
      </div>
      
      <div class="summary-section">
        <div class="summary-header">
          <el-icon><ChatDotRound /></el-icon>
          <span>审查总结</span>
        </div>
        <div class="summary-content">{{ recheckResult.resultSummary || '暂无审查总结' }}</div>
      </div>
      
      <div class="time-section">
        <div class="time-icon">
          <el-icon><Timer /></el-icon>
        </div>
        <div class="time-info">
          <span class="time-label">审查时间：</span>
          <span class="time-value">{{ formatReviewTime(recheckResult.createTime) }}</span>
        </div>
      </div>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="recheckResultDialogVisible = false" class="close-button">
          我知道了
        </el-button>
      </div>
    </template>
  </el-dialog>



</template>

<script setup>
import { useRecheckRequest } from '@/hooks/server/useRecheckRequest';
import { useServerUserStore } from '@/stores/modules/user-server';
import { onMounted } from 'vue';
import { User, Search, RefreshLeft, DocumentChecked, InfoFilled, ChatDotRound, Warning, Document, ArrowUp, ArrowDown, Timer } from '@element-plus/icons-vue';

import socketManager from '@/utils/zym-socketIo'

const userStore = useServerUserStore();

const {
  examList,
  total,
  page,
  pageSize,
  timeOrder,
  getExamListOfHook,
  handleReset,
  handleQuery,

  studentList,
  totalStudent,
  pageStudent,
  pageSizeStudent,
  studentAccount,
  dialogVisibleOfStudent,
  getStudentOfExamOfHook,
  handleResetOfStudent,
  handleQueryOfStudent,

  recheckDialogVisible,
  studentPaperId,
  requestTeacherId,
  subjectLeaderId,
  studentQuestion,
  teacherComment,
  originalScore,

  openRecheckDialog,
  handleRecheck,

  rejectReasonDialogVisible,
  rejectReason,
  openRejectReasonDialog,

  // 查看审查结果
  recheckResultDialogVisible,
  recheckResult,
  openRecheckResultDialog,
  
} = useRecheckRequest();

onMounted(async () => {
  await getExamListOfHook({
    teacherId: userStore.userInfo.id, 
    page: page.value, 
    pageSize: pageSize.value, 
    timeOrder: timeOrder.value
  });


});

const getPage = async (pageParams) => {
  page.value = pageParams.page;
  pageSize.value = pageParams.pageSize;
  await getExamListOfHook({
    teacherId: userStore.userInfo.id, 
    page: page.value, 
    pageSize: pageSize.value, 
    timeOrder: timeOrder.value
  });
};

const getPageStudent = async (pageParams) => {
  pageStudent.value = pageParams.page;
  pageSizeStudent.value = pageParams.pageSize;
  await getStudentOfExamOfHook(examinationId.value);
};


// 根据考试类型返回对应的标签类型
const getExamTypeTag = (type) => {
  const typeMap = {
    '期中考试': 'warning',
    '期末考试': 'danger',
    '单元测试': 'success',
    '模拟考试': 'info'
  };
  return typeMap[type] || 'primary';
};

// 格式化时间
const formatTime = (timeStr) => {
  if (!timeStr) return '';
  const date = new Date(timeStr);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

// 根据分数返回对应的样式类
const getScoreClass = (score) => {
  if (!score && score !== 0) return '';
  if (score >= 90) return 'score-excellent';
  if (score >= 80) return 'score-good';
  if (score >= 60) return 'score-pass';
  return 'score-fail';
};

// 格式化审查时间
const formatReviewTime = (timeStr) => {
  if (!timeStr) return '';
  const date = new Date(timeStr);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};






</script>

<style scoped lang="scss">
.recheck-card {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  margin: 20px;
  transition: all 0.3s;
  
  &:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  }
}

.recheck-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 20px 0;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

.recheck-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #303133;
  margin: 0;
  position: relative;
  padding-left: 12px;
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: #409EFF;
    border-radius: 2px;
  }
}

.filter-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-item {
  width: 140px;
  transition: all 0.3s;
  
  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

.reset-button, .query-button {
  font-weight: 500;
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  &:active {
    transform: translateY(0);
  }
}

.query-button {
  padding: 9px 16px;
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  
  th {
    background-color: #f8f9fa !important;
    font-weight: 600;
    color: #606266;
    padding: 12px 0;
  }
  
  .el-table__row {
    transition: all 0.2s;
    
    &:hover {
      background-color: #f0f7ff !important;
    }
  }
}

.exam-type-tag {
  padding: 4px 10px;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 4px;
  transition: all 0.3s;
  
  &:hover {
    transform: scale(1.05);
  }
}

.time-text {
  color: #606266;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
}

.action-button {
  padding: 6px 12px;
  font-weight: 500;
  transition: all 0.3s;
  
  &:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
  }
  
  .button-icon {
    margin-right: 4px;
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .recheck-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .filter-container {
    width: 100%;
    flex-wrap: wrap;
  }
  
  .filter-item {
    width: 100%;
  }
}

.student-dialog {
  .search-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
  }

  .spacer {
    flex: 1;
  }

  .search-right {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .search-input-wrapper {
    flex: 0 0 auto;
  }

  .search-input {
    width: 220px;
    height: 35px;
  }

  .search-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .reset-button, .query-button {
    font-weight: 500;
    transition: all 0.3s;
    width: 90px;
    height: 35px;
    font-size: 14px;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    &:active {
      transform: translateY(0);
    }
  }

  .query-button {
    padding: 9px 16px;
  }

  .student-table-container {
    margin-bottom: 20px;
  }

  .account-cell, .name-cell, .score-cell {
    color: #606266;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
  }

  .class-tag {
    padding: 4px 10px;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.3s;
    
    &:hover {
      transform: scale(1.05);
    }
  }

  .score-cell {
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-block;
    min-width: 40px;
    
    &.score-excellent {
      color: #67c23a;
      background-color: rgba(103, 194, 58, 0.1);
    }
    
    &.score-good {
      color: #409eff;
      background-color: rgba(64, 158, 255, 0.1);
    }
    
    &.score-pass {
      color: #e6a23c;
      background-color: rgba(230, 162, 60, 0.1);
    }
    
    &.score-fail {
      color: #f56c6c;
      background-color: rgba(245, 108, 108, 0.1);
    }
  }

  .recheck-button {
    transition: all 0.3s;
    
    &:hover {
      transform: scale(1.05);
    }
    
    .el-icon {
      margin-right: 4px;
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid #f0f0f0;
  }
}

:deep(.student-dialog .el-dialog__header) {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  margin-right: 0;
}

:deep(.student-dialog .el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  position: relative;
  padding-left: 12px;
  
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 18px;
    background: #409EFF;
    border-radius: 2px;
  }
}

:deep(.student-dialog .el-dialog__body) {
  padding: 20px;
}

@media (max-width: 768px) {
  .student-dialog {
    .search-container {
      flex-direction: column;
      align-items: flex-start;
    }
    
    .search-input-wrapper,
    .search-buttons {
      width: 100%;
    }
  }
}

.recheck-dialog {
  :deep(.el-dialog__header) {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    margin-right: 0;
  }

  :deep(.el-dialog__title) {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    position: relative;
    padding-left: 12px;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 18px;
      background: #409EFF;
      border-radius: 2px;
    }
  }

  :deep(.el-dialog__body) {
    padding: 30px;
  }

  :deep(.el-dialog__footer) {
    padding: 15px 20px;
    border-top: 1px solid #f0f0f0;
  }
  
  .recheck-form {
    .form-item {
      margin-bottom: 25px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .form-label {
        font-weight: 600;
        color: #303133;
        margin-bottom: 10px;
        font-size: 15px;
        
        .required {
          color: #f56c6c;
          margin-right: 4px;
        }
      }
      
      .question-input, .comment-input {
        :deep(.el-textarea__inner) {
          border-radius: 4px;
          padding: 12px;
          font-size: 14px;
          transition: all 0.3s;
          line-height: 1.6;
          
          &:focus {
            border-color: #409EFF;
            box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
          }
        }
      }
      
      .question-input {
        :deep(.el-textarea__inner) {
          border-color: #e6a23c;
          background-color: #fdf6ec;
          
          &:focus {
            border-color: #e6a23c;
            box-shadow: 0 0 0 2px rgba(230, 162, 60, 0.2);
          }
          
          &::placeholder {
            color: #e6a23c;
            opacity: 0.6;
          }
        }
      }
      
      .comment-input {
        :deep(.el-textarea__inner) {
          background-color: #f5f7fa;
          
          &::placeholder {
            color: #909399;
            opacity: 0.6;
          }
        }
      }
    }
  }
  
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    
    .cancel-button, .submit-button {
      padding: 10px 20px;
      font-weight: 500;
      transition: all 0.3s;
      min-width: 90px;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
      
      &:active {
        transform: translateY(0);
      }
    }
    
    .submit-button {
      background-color: #409EFF;
      border-color: #409EFF;
      
      &:hover {
        background-color: #66b1ff;
        border-color: #66b1ff;
      }
    }
  }
}

.reject-reason-dialog {
  :deep(.el-dialog__header) {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    margin-right: 0;
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      position: relative;
      padding-left: 12px;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 18px;
        background: #e6a23c;
        border-radius: 2px;
      }
    }
  }
  
  :deep(.el-dialog__body) {
    padding: 30px 20px;
  }
  
  :deep(.el-dialog__footer) {
    padding: 15px 20px;
    border-top: 1px solid #f0f0f0;
  }
  
  .reject-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .reject-icon {
    margin-bottom: 16px;
    
    .el-icon {
      font-size: 48px;
      color: #e6a23c;
    }
  }
  
  .reject-title {
    font-size: 20px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 20px;
  }
  
  .reject-card {
    width: 100%;
    background-color: #fdf6ec;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    
    &:hover {
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
    }
    
    .card-header {
      padding: 12px 16px;
      background-color: #e6a23c;
      color: #fff;
      font-weight: 600;
      font-size: 16px;
      display: flex;
      align-items: center;
      
      .el-icon {
        margin-right: 8px;
      }
    }
    
    .card-body {
      padding: 16px;
      color: #303133;
      line-height: 1.8;
      min-height: 100px;
      font-size: 15px;
      white-space: pre-wrap;
      word-break: break-all;
    }
  }
  
  .reject-tips {
    display: flex;
    align-items: center;
    color: #909399;
    font-size: 14px;
    
    .el-icon {
      margin-right: 6px;
      color: #e6a23c;
    }
  }
  
  .dialog-footer {
    display: flex;
    justify-content: center;
    
    .close-button {
      padding: 10px 24px;
      font-weight: 500;
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
      
      &:active {
        transform: translateY(0);
      }
    }
  }
}

/* 查看审查结果对话框样式 */
.recheck-result-dialog {
  .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    margin-right: 0;
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      position: relative;
      padding-left: 12px;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 18px;
        background: linear-gradient(to bottom, #67c23a, #95d475);
        border-radius: 2px;
      }
    }
  }
  
  .el-dialog__body {
    padding: 25px;
  }
  
  .el-dialog__footer {
    padding: 15px 20px;
    border-top: 1px solid #f0f0f0;
  }
  
  .result-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  
  .result-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5px;
  }
  
  .result-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(to bottom right, #f0f9eb, #e1f3d8);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    
    .el-icon {
      font-size: 36px;
      color: #67c23a;
    }
  }
  
  .result-title {
    font-size: 22px;
    font-weight: 600;
    color: #303133;
    margin: 0;
    text-align: center;
  }
  
  .score-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
  }
  
  .score-card {
    background-color: #f9fafc;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
    
   
    
    &.original {
      border-top: 4px solid #909399;
      
      .card-header {
        color: #606266;
        
        .el-icon {
          background-color: rgba(144, 147, 153, 0.1);
          color: #909399;
        }
      }
      
      .score-value {
        color: #606266;
      }
    }
    
    &.final {
      border-top: 4px solid #67c23a;
      
      .card-header {
        color: #67c23a;
        
        .el-icon {
          background-color: rgba(103, 194, 58, 0.1);
          color: #67c23a;
        }
      }
      
      .score-value {
        color: #67c23a;
      }
    }
  }
  
  .card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    
    .el-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }
    
    span {
      font-size: 16px;
      font-weight: 600;
    }
  }
  
  .score-value {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin: 10px 0;
  }
  
  .score-diff {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 10px;
    
    &.score-up {
      background-color: rgba(103, 194, 58, 0.1);
      color: #67c23a;
      
      .el-icon {
        color: #67c23a;
      }
    }
    
    &.score-down {
      background-color: rgba(245, 108, 108, 0.1);
      color: #f56c6c;
      
      .el-icon {
        color: #f56c6c;
      }
    }
  }
  
  .summary-section {
    background-color: #f9fafc;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }
  
  .summary-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    
    .el-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      background-color: rgba(64, 158, 255, 0.1);
      color: #409EFF;
    }
    
    span {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }
  
  .summary-content {
    padding: 16px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #ebeef5;
    color: #606266;
    line-height: 1.8;
    font-size: 14px;
    min-height: 80px;
  }
  
  .time-section {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background-color: #f9fafc;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }
  
  .time-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: rgba(144, 147, 153, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    
    .el-icon {
      font-size: 24px;
      color: #909399;
    }
  }
  
  .time-info {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    
    .time-label {
      font-weight: 600;
      color: #606266;
    }
    
    .time-value {
      color: #303133;
      font-family: 'Courier New', monospace;
    }
  }
  
  .dialog-footer {
    display: flex;
    justify-content: center;
    
    .close-button {
      min-width: 120px;
      padding: 10px 20px;
      border-radius: 20px;
      font-weight: 500;
      transition: all 0.3s;
      background-color: #f0f9eb;
      border-color: #e1f3d8;
      color: #67c23a;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(103, 194, 58, 0.2);
        background-color: #67c23a;
        border-color: #67c23a;
        color: #fff;
      }
      
      &:active {
        transform: translateY(0);
      }
    }
  }
  
  @media (max-width: 768px) {
    width: 90% !important;
    
    .el-dialog__body {
      padding: 20px;
    }
    
    .score-cards {
      grid-template-columns: 1fr;
    }
    
    .score-card {
      margin-bottom: 16px;
    }
    
    .time-section {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
  }
}
</style>
